<template>
  <view>
    <!-- 轮播图 -->
    <uni-swiper-dot :info="swiperInfo" :current="currentState" field="content" mode="round">
      <swiper class="swiper-box" :autoplay="true" @change="handleOneChange">
        <swiper-item v-for="(item,index) in swiperInfo" :key="index">
          <view class="swiper-item">
            <image :src="item.imgUrl" mode="aspectFill" style="width: 100%;"></image>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- 中 -->
    <uni-card v-for="(oneItem,i) in itemModule" :key="i" :title="oneItem.name" spacing="0" padding="0" shadow="0px 0px 3px 1px rgba(0, 0, 0, 0.08)">
      <uni-grid :column="3" :highlight="true" class="home-middle">
        <uni-grid-item class="grid-item" v-for="(item2,i2) in oneItem.childsModule" :key="i2">
            <view class="grid-item-box" @click="gotoOtherPage(item2)">
                <uni-icons :type="item2.iconType" :size="30" color="#777" />
                <text class="text"> {{ item2.childName }} </text>
            </view>
        </uni-grid-item>
      </uni-grid>
    </uni-card>
    <!-- 下 -->
  </view>
</template>

<script setup>
import { ref } from 'vue';

  // 上 -- 轮播图 
  const swiperInfo = ref([
    { content: 'aaa',imgUrl: '/static/images/apply-img/好评选择.png' },
    { content: 'bbb',imgUrl: '/static/images/apply-img/好评.png' },
    { content: 'ccc',imgUrl: '/static/images/apply-img/好评选择.png' }
  ])
  const currentState = ref(0)  // 当前图
  const handleOneChange = (e)=>{
    currentState.value = e.detail.current
  }
  
  // 中 -- 智能划分模块
  const itemModule = ref([
    { 
      name: '职能服务',
      childsModule: [
        {  iconType: 'folder-add', childName: '领料申请',goUrl: '/pages/applySkuOrder/applySkuOrder' },
        {  iconType: 'cart', childName: 'WS优选',goUrl: '/pages/wsShopping/index' },
        {  iconType: 'wallet', childName: '文件管理',goUrl: '/pages/fileManagement/fileManagement' },
      ]
    },
    {
      name: '基础资料维护',
      childsModule: [
        {  iconType: 'camera', childName: '领料申请',goUrl: '/pages/applySkuOrder/applySkuOrder' },
        {  iconType: 'wallet', childName: '文件管理',goUrl: '/pages/login/login' },
      ]
    }
  ])
  // 点击模块跳转页面
  const gotoOtherPage = (item)=>{
    const isTabBarPage = getCheckPage(item)
    if (isTabBarPage) { // 如果是 tabBar 页面，使用 uni.switchTab 跳转
      uni.switchTab({ url: item.goUrl })
    } else {  // 如果是非 tabBar 页面，使用 uni.navigateTo 跳转
      uni.navigateTo({ url:item.goUrl })
    }
  }
  // 检查跳转页面类型 (是否是tabBar 页面)
  const getCheckPage = (item)=>{
    const tabBar = ['/pages/home/home','/pages/my/my']
    for (var i = 0; i < tabBar.length; i++) {
      var ele = tabBar[i];
      if(ele === item.goUrl) return true
    }
    return false
  }
  
  
  const handleTwoChange = (e)=>{
    currentState.value = e.detail.current
  }
  
</script>

<style lang="scss">
.home-middle {
  .grid-item-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
